﻿@namespace BlazorComponent

<div class="titled-border-container @CssClass" style="@CombinedContainerStyle">
    @* 横向标题（顶部） *@
    @if (!string.IsNullOrWhiteSpace(HorizontalTitle))
    {
        <div class="border-title horizontal @HorizontalTitleClass" style="@CombinedHorizontalTitleStyle">
            @HorizontalTitle
        </div>
    }

    @* 纵向标题（左侧） *@
    @if (!string.IsNullOrWhiteSpace(VerticalTitle))
    {
        <div class="border-title vertical @VerticalTitleClass" style="@CombinedVerticalTitleStyle">
            <span class="vertical-text">@VerticalTitle</span>
        </div>
    }

    @* 内容区域 *@
    <div class="border-content @ContentClass" style="@ContentStyle">
        @ChildContent
    </div>
</div>

@code {
    [Parameter]
    public string? HorizontalTitle { get; set; }

    [Parameter]
    public string? VerticalTitle { get; set; }

    [Parameter]
    public RenderFragment? ChildContent { get; set; }

    // 颜色参数
    [Parameter]
    public string BorderColor { get; set; } = "#2563eb";

    [Parameter]
    public string HorizontalTitleBackground { get; set; } = "#fff";

    [Parameter]
    public string HorizontalTitleColor { get; set; } = "#2563eb";

    [Parameter]
    public string VerticalTitleBackground { get; set; } = "#fff";

    [Parameter]
    public string VerticalTitleColor { get; set; } = "#2563eb";

    // 尺寸参数
    [Parameter]
    public string Width { get; set; } = "100%";

    [Parameter]
    public string Height { get; set; } = "auto";

    // CSS 类名
    [Parameter]
    public string CssClass { get; set; } = "";

    [Parameter]
    public string HorizontalTitleClass { get; set; } = "";

    [Parameter]
    public string VerticalTitleClass { get; set; } = "";

    [Parameter]
    public string ContentClass { get; set; } = "";

    // 内联样式
    [Parameter]
    public string ContainerStyle { get; set; } = "";

    [Parameter]
    public string HorizontalTitleStyle { get; set; } = "";

    [Parameter]
    public string VerticalTitleStyle { get; set; } = "";

    [Parameter]
    public string ContentStyle { get; set; } = "";

    // 边框样式参数
    [Parameter]
    public string BorderWidth { get; set; } = "2px";

    [Parameter]
    public string BorderStyle { get; set; } = "solid";

    [Parameter]
    public string BorderRadius { get; set; } = "8px";

    [Parameter]
    public string Padding { get; set; } = "20px";

    // 标题字体参数
    [Parameter]
    public string TitleFontSize { get; set; } = "14px";

    [Parameter]
    public string TitleFontWeight { get; set; } = "600";

    [Parameter]
    public string TitlePadding { get; set; } = "0 10px";

    // 标题位置参数
    [Parameter]
    public string HorizontalTitleLeft { get; set; } = "30px";

    [Parameter]
    public string VerticalTitleTop { get; set; } = "30px";

    private string CombinedContainerStyle =>
        $"width: {Width}; height: {Height}; --border-color: {BorderColor}; " +
        $"--border-width: {BorderWidth}; --border-style: {BorderStyle}; " +
        $"--border-radius: {BorderRadius}; --padding: {Padding}; {ContainerStyle}";

    private string CombinedHorizontalTitleStyle =>
        $"background-color: {HorizontalTitleBackground}; color: {HorizontalTitleColor}; " +
        $"font-size: {TitleFontSize}; font-weight: {TitleFontWeight}; " +
        $"padding: {TitlePadding}; {HorizontalTitleStyle}";

    private string CombinedVerticalTitleStyle =>
        $"background-color: {VerticalTitleBackground}; color: {VerticalTitleColor}; " +
        $"font-size: {TitleFontSize}; font-weight: {TitleFontWeight}; " +
        $"padding: {TitlePadding}; {VerticalTitleStyle}";
}

<style>
    .titled-border-container {
        position: relative;
        border: var(--border-width) var(--border-style) var(--border-color);
        border-radius: var(--border-radius);
        padding: var(--padding);
        display: flex;
        flex-direction: column;
    }

    .border-title {
        position: absolute;
    }

        .border-title.horizontal {
            top: 0;
            left: 50%;
            transform: translate(-50%, -50%);
        }

        .border-title.vertical {
            left: 0;
            top: 50%;
            transform: translate(-50%, -50%) rotate(-90deg);
            transform-origin: center center;
        }

    .vertical-text {
        white-space: nowrap;
    }

    .vertical-text {
        white-space: nowrap;
    }

    .border-content {
        flex: 1;
    }
</style>